<template>
  <view class="task-card">
    <view class="card-main-box">
      <view class="content">
        <view class="title">{{ cardData.title }}</view>
        <view class="sub-title" v-for="subTitle in cardData.subTitle" :key="subTitle">
          {{ subTitle }}
        </view>
      </view>
      <u-image v-if="statusImage" class="process-status" :src="statusImage" mode="widthFix"/>
    </view>
    <slot name="menu" />
  </view>
</template>

<script>
	
	import statusImg from '@/static/icon/approval-icon.png'
	import passImg from '@/static/icon/pass-icon.png'
	import refuseImg from '@/static/icon/refuse-icon.png'
	import draftImg from '@/static/icon/draft-icon.png'
	import cancelImg from '@/static/icon/cancel-icon.png'
	import stoppedImg from '@/static/icon/stopped-icon.png'
	import closeIcon from '@/static/icon/close-icon.png'
	
export default {
  name: 'taskCard',
  props: {
    cardData: {
      type: Object,
      required: true
    },
    flowStatus: {
      type: Number
    }
  },
  data () {
    return {
     
    }
  },
  computed: {
    statusImage () {
      switch (this.flowStatus) {
        case this.SysFlowWorkOrderStatus.APPROVING:
        case this.SysFlowWorkOrderStatus.SUBMITED:
          // 审批中
          return statusImg;
        case this.SysFlowWorkOrderStatus.STOPPED:
          // 终止
          return stoppedImg;
        case this.SysFlowWorkOrderStatus.REFUSED:
          // 拒绝
          return refuseImg;
        case this.SysFlowWorkOrderStatus.FINISHED:
          // 通过
          return passImg;
        case this.SysFlowWorkOrderStatus.CANCEL:
          // 撤销
          return cancelImg;
        case this.SysFlowWorkOrderStatus.DRAFT:
          // 草稿
          return draftImg;
        default:
          return null;
      }
    }
  }
}
</script>

<style scoped>
  .task-card {
    background: white;
    border-radius: 16rpx;
    padding: 32rpx;
  }
  .card-main-box {
    display: flex;
  }
  .card-main-box .content {
    flex-grow: 1;
    flex-shrink: 1;
    width: 100px;
  }
  .card-main-box .process-status {
    flex-grow: 0;
    flex-shrink: 0;
    width: 134rpx !important;
    height: 106rpx !important;
    margin-left: 30rpx;
    margin-top: 30rpx;
  }
  .card-main-box .content .title {
    display: block;
    font-weight: bold;
    color: #333333;
    line-height: 40rpx;
    height: 40rpx;
    font-size: 32rpx;
    margin-bottom: 16rpx;
  }
  .card-main-box .content .sub-title {
    display: block;
    color: #666666;
    line-height: 40rpx;
    height: 40rpx;
    font-size: 28rpx;
    font-weight: 400;
    margin-top: 8rpx;
    /** 单行省略号 */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
</style>
